<template>
	<div id="app">
		<el-container>
			<el-header height="50px">
				<i class="el-icon-s-help"></i>
				<span>ERP管理系统</span>
				<span style="font-size:14px;margin-left:40px;color:#FFFFFF">{{emp.ename}}&nbsp;欢迎您！</span>
				
				<el-tooltip class="item" effect="dark" content="关于系统" placement="bottom-start">
					<el-button type="info" icon="el-icon-warning-outline" circle></el-button>
				</el-tooltip>
				<el-popover placement="down" width="400" height="600" trigger="click">
		
					<el-button class="item" slot="reference" type="primary" icon="el-icon-user" circle></el-button>
				</el-popover>
				<!-- <el-tooltip class="item" effect="dark" content="最新消息提示" placement="bottom-start">
					<el-button type="warning" icon="el-icon-s-comment" circle></el-button>
				</el-tooltip> -->
				<el-tooltip class="item" effect="dark" content="快捷查询" placement="bottom-start">
					<el-button icon="el-icon-search" circle></el-button>
				</el-tooltip>
				<el-dropdown style="float:right;">
					<span class="el-dropdown-link">
						<el-tooltip class="item" effect="dark" content="待办事项" placement="bottom-start" :disabled="true">
							<el-button type="warning" icon="el-icon-date" circle></el-button>
						</el-tooltip>
					</span>
					<el-dropdown-menu slot="dropdown" v-if="todos.length!=0">
						<el-dropdown-item icon="el-icon-plus"  v-if="todos.length>0" v-for="tx in todos">
							<router-link :to="{path:tx.path}">{{tx.explains}}
							<span style="font-size: 10px;color:orangered">{{tx.num}}</span>
							</router-link>
						</el-dropdown-item>
						<el-dropdown-item v-else>
							暂无
						</el-dropdown-item>
					</el-dropdown-menu>
					<span v-if='todos.length>0' class="mark"></span>
				</el-dropdown>
				<el-dropdown style="float:right;clear:left">
					<span class="el-dropdown-link">
						<el-tooltip class="item" effect="dark" content="最新消息提示" placement="bottom" :disabled="true">
							<el-button type="success" icon="el-icon-s-comment" circle></el-button>
						</el-tooltip>
					</span>
					<el-dropdown-menu slot="dropdown" v-if="pushmsgs.length!=0">
						<!-- <el-dropdown-item icon="el-icon-plus"  v-for="ty in pushmsgs"><router-link :to="{path:ty.path}"></router-link>
							<span v-if="ty.type==0" @click="dialogFormVisible100=true">公告<span style="font-size: 10px;color:orangered">{{pushzero.length}}</span></span>
							<span v-else-if="ty.type==1">仓库上线预警<span style="font-size: 10px;color:orangered">{{pushone.length}}</span></span>
							<span v-else-if="ty.type==2">仓库下线预警<span style="font-size: 10px;color:orangered">{{pushtwo.length}}</span></span>
							<span v-else-if="ty.type==3">负库存<span style="font-size: 10px;color:orangered">{{pushthree.length}}</span></span>
						</el-dropdown-item> -->
						<el-dropdown-item icon="el-icon-plus"  v-if="pushzero.length!=0">
							<span @click="dialogFormVisible100=true">公告<span style="font-size: 10px;color:orangered">&nbsp;{{pushzero.length}}</span></span>
						</el-dropdown-item>
						<el-dropdown-item icon="el-icon-plus" v-if="pushone.length!=0">
							<span @click="dialogFormVisible100=true">仓库上线预警<span style="font-size: 10px;color:orangered">&nbsp;{{pushone.length}}</span></span>
						</el-dropdown-item>
						<el-dropdown-item icon="el-icon-plus" v-if="pushtwo.length!=0">
							<span @click="dialogFormVisible100=true">仓库下线预警<span style="font-size: 10px;color:orangered">&nbsp;{{pushtwo.length}}</span></span>
						</el-dropdown-item>
						<el-dropdown-item icon="el-icon-plus" v-if="pushthree.length!=0">
							<span @click="dialogFormVisible100=true">负库存<span style="font-size: 10px;color:orangered">&nbsp;{{pushthree.length}}</span></span>
						</el-dropdown-item>
					</el-dropdown-menu>
					<span v-if='pushmsgs.length>0' class="mark"></span>
					<a href="/#/" style="font-size:12px;float:right;margin-right:20px;color:#ECECEC;text-decoration:none">退出</a>
				</el-dropdown>
			</el-header>
		
			<el-container>
					<el-menu default-active="0" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" @open="handleOpen"
					 @close="handleClose">
						<el-menu-item index="0">
							<i class="el-icon-star-off"></i>
							<router-link to="/home/">首页</router-link>
						</el-menu-item>
						<el-submenu :index="(index+1).toString()" v-for="(mb,index) in menus" v-if="mb.path==''">
							<template slot="title">
								<i :class="mb.icon"></i>
								<span slot="title">{{mb.mname}}</span>
							</template>
							<el-menu-item-group v-for="sb in mb.sndbars">
								<el-menu-item v-if="sb.sname!='调职申请' && sb.sname!='离职申请'"><router-link :to="sb.path">{{sb.sname}}</router-link></el-menu-item>
								<el-menu-item v-else-if="todos.length==0 && emp.job=='manager' &&  sb.sname=='离职申请'"><router-link :to="sb.path">{{sb.sname}}</router-link></el-menu-item>
								<el-menu-item v-else-if="emp.job!='boss' && emp.rnames.length!=0 && (sb.sname=='调职申请' || sb.sname=='离职申请')">
									<router-link :to="sb.path">{{sb.sname}}</router-link>
								</el-menu-item>
								<el-menu-item v-else disabled><router-link :to="sb.path">{{sb.sname}}</router-link></el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-menu-item :index="(index+10).toString()" v-for="(mb,index) in menus" v-if="mb.path!=''">
							<i :class="mb.icon"></i>
							<router-link :to="mb.path">{{mb.mname}}</router-link>
						</el-menu-item>
						
						<!-- <el-submenu index="4">
							<template slot="title">
							<i class="el-icon-s-cooperation"></i>
								<span slot="title">个人管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="4-1"><router-link to="/home/personalinfro">个人基本信息</router-link></el-menu-item>
								<el-menu-item index="4-2"><router-link to="/home/applytransfer">调职申请</router-link></el-menu-item>
								<el-menu-item index="4-3"><router-link to="/home/applydimission">离职离职</router-link></el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-menu-item index="5">
							<i class="el-icon-s-cooperation"></i>
							<router-link to="/home/queryrole">部门职责权限</router-link>
						</el-menu-item>
						<el-submenu index="6">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span slot="title">员工管理</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="6-1"><router-link to="/home/queryemp">员工基本信息管理</router-link></el-menu-item>
								<el-menu-item index="6-2"><router-link to="/home/givepower">新入员工</router-link></el-menu-item>
								<el-menu-item index="6-3"><router-link to="/home/dimissiontomger">员工离职</router-link></el-menu-item>
								<el-menu-item index="6-5"><router-link to="/home/changepower">本部门调职</router-link></el-menu-item>
								<el-menu-item index="6-6"><router-link to="/home/transdepart">跨本部门调职</router-link></el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-submenu index="7">
							<template slot="title">
								<i class="el-icon-user"></i>
								<span slot="title">员工管理2</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="7-1"><router-link to="/home/queryallemp">查询员工</router-link></el-menu-item>
								<el-menu-item index="7-2"><router-link to="/home/induction">新员工入职</router-link></el-menu-item>
								<el-menu-item index="7-3"><router-link to="/home/dimissiontoboss">员工离职</router-link></el-menu-item>
							</el-menu-item-group>
						</el-submenu>
						<el-menu-item index="8">
							<i class="el-icon-s-custom"></i>
							<router-link to="/home/querymanager">经理管理</router-link>
						</el-menu-item>
						<el-menu-item index="9">
							<i class="el-icon-office-building"></i>
							<router-link to="/home/"><router-link to="/home/querydept">部门管理</router-link></router-link>
						</el-menu-item>
						<el-menu-item index="10" >
							<i class="el-icon-user"></i>
							<span slot="title"><router-link to="table">测试</router-link></span>
						</el-menu-item> -->
					</el-menu>
					<el-main>
						<router-view v-if="isRouterAlive"></router-view>
						<el-dialog title="推送消息" :visible.sync="dialogFormVisible100" @close="dialogFormVisible100=false">
								<table style="margin:16px 0;border:1px solid red;padding:4px" v-for="(x,index) in pushmsgs" v-if="pushmsgs.length!=0">
									<tr>
										<td colspan="2">
											<el-input type="textarea" :value="x.content"></el-input>
										</td>
									</tr>
									<tr>
										<td align="left" style="color:orange">发送人  :{{x.ename}}</td><td align="right" style="color:skyblue">发送时间  :{{x.sendtime}}</td>
									</tr>
									<tr>
										<td colspan="2">
											<el-button type="primary"  @click="hasReaded(index,x.pid,x.type)">已 阅</el-button>
										</td>
									</tr>
								</table>
						</el-dialog>
					</el-main>
					</el-container>
				</el-container>
			</el-container>
	</div>
</template>

<script>
export default {
  name: 'App',
	provide(){
		return{
			reload: this.reload
		}
	},
  data(){
		return{
			//emp:this.$route.params.user,
			emp:this.$route.query.user,
			menus:[],
			todos:[],
			dialogFormVisible100:false,
			pushmsgs:[],
			isRouterAlive:true,
			pushzero:[],
			pushone:[],
			pushtwo:[],
			pushthree:[],
		}  
  },
	created(){
		this.$axios.post("menu?id="+this.emp.eid+"").then(v=>{
			console.log(v)
			if(v.data){
				this.menus=v.data.menubar;
				this.todos=v.data.todos;
				this.pushmsgs=v.data.pushmsgs;
				this.pushmsgs.forEach((v)=>{
					if(v.type==0){
						this.pushzero.push(v)
					}else if(v.type==1){
						this.pushone.push(v)
					}else if(v.type==2){
						this.pushtwo.push(v)
					}else if(v.type==3){
						this.pushthree.push(v)
					}
				})
			}else{
				alert("出错了！！");
			}
		}).catch(ex=>{
			alert("出错了！"+ex);
		});
		//alert(this.emp.rnames);
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},
		
		reload(){
			this.isRouterAlive = false; 
			this.$nextTick(function(){
				this.isRouterAlive = true; 
			})
		},
		showpushmsg(){
			this.dialogFormVisible100=true;
		},
	/* 	closemsg(){
				this.dialogFormVisible100=false;
		} */
		hasReaded(index,pid,type){
			this.$axios.post("delpush?pid="+pid+"").then(v=>{
				console.log(v)
				if(v.data){
						if(type==0){
							this.pushzero.splice(this.pushmsgs[index],1)
						}else if(type==1){
							this.pushone.splice(this.pushmsgs[index],1)
						}else if(type==2){
							this.pushtwo.splice(this.pushmsgs[index],1)
						}else if(type==3){
							this.pushthree.splice(this.pushmsgs[index],1)
						}
				}else{
					this.$message.error("出错了！");
				}
		}).catch(ex=>{
			this.$message.error("出错了！");
		})
			this.pushmsgs.splice(index,1);
	
		}
	}
}
 
</script>

<style>
html{
		height: 100%;
	}
	 .el-container {
		height: 100%;
	} 
	
	body{
		padding: 0;
		margin: 0;
		height: 100%;
	}
	i{
		font-family:Times New Roman;
		font-style:normal;
	}
*{
	padding: 0;
	margin: 0;
}

 
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	height: 100%;
}

dd {
		margin: 0px;
		padding: 0px;
		font-weight: normal;
		font-family: "Hiragino Sans GB";
	}

	ul {
		list-style: none;
	}

	.el-header {
		background-color: #333333;
		color: aliceblue;
		line-height: 45px;
		font-size: 20px;

	}

	.el-aside {
		background-color: white;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: bisque;
		color: #333;
		text-align: center;
		
	}

	.el-header .el-button {
		float: right;
	}

	.item {
		margin: 4px;
	}
	.el-menu-item,.el-submenu{
		width:200px;
	}
	.el-menu-item a{
		color:white;
		text-decoration:none;
	}
.el-menu-item.is-active .router-link{
	color:lightblue;
}
.el-submenu .el-menu-item-group .el-menu-item.is-active template i{
	color:lightblue;
}
div.cell{
	 text-align:center;
 }
 .el-button{
 	padding: 12px;
 }
 
.el-dropdown-menu a{
	text-decoration:none;
	color:#333;
}
.mark{
	width:8px;
	height:8px;
	background:orangered;
	border-radius: 100%;
	position:absolute;
	top:3px;
	right:2px;
}
.el-dialog table{
	width:700px;
	height:160px;
	border:1px solid #FFFFFF;
	margin:0 auto;
}
</style>
